<template>
  <div>
    <div class="pc">
      <div class="header">
        <div class="contant">
          <div class="contant_left">
            <img src="../../assets/images/index/banner_one.png" alt />
          </div>
          <div class="contant_right">
            <div class="title">积分兑了么</div>
            <div class="info_one">专业提供银行积分兑现服务，安全、快速的将银行积分变现</div>
            <div class="info_two">专业团队研发软件</div>
          </div>
        </div>
      </div>
      <!-- <swiper :options="headerbanner">
            <swiper-slide>
          <div class="header">
            <div class="contant">
              <div class="contant_left">
                <img src="../../assets/images/index/banner_one.png" alt />
              </div>
              <div class="contant_right">
                <div class="title">积分兑了么</div>
                <div class="info_one">专业提供银行积分兑现服务，安全、快速的将银行积分变现</div>
                <div class="info_two">专业团队研发软件</div>
              </div>
            </div>
          </div>
      </swiper-slide>-->
      <!-- <swiper-slide>
          <div class="header_t"></div>
      </swiper-slide>-->
      <!-- <swiper-slide>
          <div class="header_three"></div>
      </swiper-slide>-->

      <!-- <swiper-slide>
          <div class="header_t"></div>
      </swiper-slide>-->
      <!-- </swiper> -->
      <!-- 第一个轮播图 -->
      <div :class="['banner_nav', twoshow ? 'banner_nav_i' : '']" id="two">
        <div class="banner_nav_contant">
          <div
            :class="['banner_nav_contant_item',changebannernavindex == index ? 'banner_nav_contant_item_i':'']"
            @click="changebannernav(index)"
            v-for="(item,index) in bannernav"
            :key="index"
          >
            {{item}}
            <div class="nav_line"></div>
          </div>
        </div>
      </div>
      <div :class="['onebanner', twoshow?'onebanner_i' : '']">
        <swiper
          class="oneswiper"
          @slideChangeTransitionEnd="slideChangeTransitionEnd"
          :options="onebanner"
          ref="obanner"
        >
          <swiper-slide>
            <div class="onebanner_contant">
              <img src="../../assets/images/index/letter01.png" alt />
              <div class="onebanner_contant_contant">
                <div class="title">积分兑了么是什么样的平台</div>
                <p>积分兑了么是专业提供银行积分兑现服务。通过“积分兑换券码-报单-审核提现”模式，安全、快速的将银行积分变现。</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="onebanner_contant">
              <img src="../../assets/images/index/letter02.png" alt />
              <div class="onebanner_contant_contant">
                <div class="title">如何通过积分兑了么赚钱</div>
                <p>1.个人银行积分变现</p>
                <p>2.会员/代理赚会员兑换差价</p>
                <p>3.代理赚推荐奖励。</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="onebanner_contant">
              <img src="../../assets/images/index/letter03.png" alt />
              <div class="onebanner_contant_contant">
                <div class="title">人人都是普惠金融家</div>
                <p>积分兑了么的运营模式不仅为金融机构减轻运营成本，同时让大众享受金融领域福利，实现人人都是普惠金融家的梦想，实现多赢的局面。</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <!-- 行业介绍 -->
      <div :class="['industry', threeshow ? 'industry_i':'']" id="three">
        <ul>
          <li v-for="(item,index) in industrylist" :key="index">
            <img :src="item.src" alt />
            <span>{{item.title}}</span>
          </li>
        </ul>
        <div class="industry_message">
          全国信用卡发行量超过
          <span>9.7</span>亿张，每年产生的积分数量超过
          <span>9000</span>亿分，仅过期积分就超过
          <span>1000</span>亿分，市场潜力巨大。
        </div>
      </div>
      <!-- 产品优势 -->
      <div :class="['advan', fourshow? 'advan_i':'']" id="four">
        <div class="product_advan">
          <div class="headline">
            <h2>产品优势</h2>
            <span>一站式服务助力用户迈向辉煌，每一个环节我们都是精益求精</span>
          </div>
          <!-- 内容 -->
          <div class="contant">
            <ul>
              <li
                :class="[ adventer_index ==index ? 'adventer_i' : '']"
                v-for="(item,index) in advanlist_one"
                @mouseenter="adventer(index)"
                :key="index"
              >
                <div class="top">
                  <img class="srcone" :src="item.src1" alt />
                  <img class="srctwo" :src="item.src2" alt />
                  <div class="little_title">{{item.little_title}}</div>
                </div>
                <div class="bot">{{item.message}}</div>
              </li>
            </ul>
            <img src="../../assets/images/index/advan_banner.png" alt />
            <ul>
              <li
                :class="[ adventer_index == index + 3 ? 'adventer_i' :'']"
                v-for="(item,index) in advanlist_two"
                @mouseenter="adventert(index)"
                :key="index"
              >
                <div class="top">
                  <img class="srcone" :src="item.src1" alt />
                  <img class="srctwo" :src="item.src2" alt />
                  <div class="little_title">{{item.little_title}}</div>
                </div>
                <div class="bot">{{item.message}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 积分兑了么 -->
      <div :class="['integral',fiveshow? 'integral_i':'']" id="five">
        <div class="headline">
          <h2>积分兑了么</h2>
          <span>综合性的银行积分兑换平台</span>
        </div>
        <div class="swiper_jt">
          <swiper class="swiper" :options="swiperOptionbot">
            <swiper-slide>
              <img src="../../assets/images/index/jf01.png" alt />
            </swiper-slide>
            <swiper-slide>
              <img src="../../assets/images/index/jf02.png" alt />
            </swiper-slide>
            <swiper-slide>
              <img src="../../assets/images/index/jf03.png" alt />
            </swiper-slide>
            <swiper-slide>
              <img src="../../assets/images/index/jf04.png" alt />
            </swiper-slide>
            <swiper-slide>
              <img src="../../assets/images/index/jf05.png" alt />
            </swiper-slide>
          </swiper>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
      <!-- 行业资讯 -->
      <div :class="['infomation',sixshow?'infomation_i':'']" id="six">
        <div class="infomation_contant">
          <div class="headline">
            <h2>行业资讯</h2>
            <span>让您无时无刻了解新行内资讯变动，把握同行新技巧</span>
          </div>
          <ul>
            <li v-for="(item,index) in infomationlist" @click="toinfodetail(item.id)" :key="index">
              <div class="pic">
                <img :src="item.cover" alt />
              </div>
              <div class="right">
                <div class="right_t">
                  <div class="title">{{ item.title }}</div>
                  <div class="date">{{ item.date }}</div>
                </div>
                <div class="right_b">
                  <div v-html="item.content"></div>
                </div>
              </div>
              <!-- 动画效果 -->
              <div class="animate"></div>
            </li>
          </ul>
          <!-- 查看更多 -->
          <div class="more" @click="toindustry">查看更多</div>
        </div>
      </div>
      <!-- 下载app -->
      <div class="downapp">
        <div class="contant">
          <div class="pic">
            <img src="../../assets/images/index/down2.png" alt />
            <img class="ewm" src="../../assets/images/index/ewm.png" alt />
          </div>
          <div class="downapp_contant">
            <div class="one">积分兑了么</div>
            <div class="two">综合性的银行积分兑换平台</div>
            <div class="three">下载app</div>
          </div>
        </div>
      </div>
      <!-- 回到顶部 -->
      <to-top :topscrolltop="top_scroll" @scroll="scrollToTop"></to-top>
    </div>
    <!-- <foo-ter></foo-ter> -->
    <!-- 移动端 -->
    <m-index :infomationlist="infomationlist"></m-index>
  </div>
</template>

<script>
// import fooTer from "../../components/footer/footer.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.min.css";
import mIndex from "./mindex";
import toTop from "@/components/totop/totop.vue";
export default {
  components: {
    swiper,
    swiperSlide,
    mIndex,
    toTop
  },
  data() {
    return {
      swiperOptionbot: {
        direction: "horizontal",
        loop: true,
        slidesPerView: 5,
        spaceBetween: 20,
        centeredSlides: true,
        centeredSlidesBounds: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      headerbanner: {
        direction: "horizontal",
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      },
      onebanner: {
        direction: "horizontal",
        loop: true,
        centeredSlides: true,
        centeredSlidesBounds: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },

        spaceBetween: 90,
        // slidesOffsetBefore : 1,
        slidesPerView: 2,
        realIndex: this.changebannernavindex
        //  autoplay: {
        //   delay: 10000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        //   },
      },
      bannernav: [
        "积分兑了么是什么样的平台",
        "如何通过积分兑了么赚钱",
        "人人都是普惠金融家"
      ],
      industrylist: [
        {
          src: require("../../assets/images/index/advan1.png"),
          title: "行业风口期"
        },
        {
          src: require("../../assets/images/index/advan2.png"),
          title: "市场空白期"
        },
        {
          src: require("../../assets/images/index/advan3.png"),
          title: "利润丰富"
        },
        {
          src: require("../../assets/images/index/advan4.png"),
          title: "1+1>2收益叠加"
        },
        {
          src: require("../../assets/images/index/advan5.png"),
          title: "0客服压力"
        }
      ],
      advanlist_one: [
        {
          src1: require("../../assets/images/header/advan11.png"),
          src2: require("../../assets/images/header/advan21.png"),
          little_title: "会员等级",
          message:
            " 普通会员及代理/代理商可以通过兑换积分获得收益，代理/代理商兑现比例高于普通会员。"
        },
        {
          src1: require("../../assets/images/header/advan12.png"),
          src2: require("../../assets/images/header/advan22.png"),
          little_title: "无需繁琐的手续",
          message:
            "7*24小时随时申请，通过“积分兑换券码-报单-审核提现”模式，安全、快速的将银行积分变现。"
        },
        {
          src1: require("../../assets/images/header/advan13.png"),
          src2: require("../../assets/images/header/advan23.png"),
          little_title: "100%一手资源",
          message:
            "所有银行和三网积分兑换的上游渠道，100%自主建立，确保用户报单的安全、快速审核。"
        }
      ],
      advanlist_two: [
        {
          src1: require("../../assets/images/header/advan14.png"),
          src2: require("../../assets/images/header/advan24.png"),
          little_title: "代理等级",
          message:
            "享受旗下无限级别的会员/黄金会员积分兑换差价；旗下的会员充值成为代理，都有推荐奖励。"
        },
        {
          src1: require("../../assets/images/header/advan15.png"),
          src2: require("../../assets/images/header/advan25.png"),
          little_title: "金融机构达成战略",
          message:
            "平台现已经可以兑换建设、工商、中行、招商、平安、光大、交通40+银行，其他银行也即将上线。"
        },
        {
          src1: require("../../assets/images/header/advan16.png"),
          src2: require("../../assets/images/header/advan26.png"),
          little_title: "如何通过平台赚钱",
          message:
            "个人银行积分变现，代理/代理商赚会员兑换差价，代理赚推荐奖励。"
        }
      ],
      infomation: [
        {
          src: require("../../assets/images/index/industry1.png"),
          title: "积分兑了么介绍",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry2.png"),
          title: "建设银行原接收验证码兑换方式恢复",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry3.png"),
          title: "建行普卡兑换今日已上线  ",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          src: require("../../assets/images/index/industry4.png"),
          title: "积分兑了么介绍",
          date: "2019-12-11",
          message:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        }
      ],
      infomationlist: [],
      changebannernavindex: 0,
      towheight: "",
      twoshow: false,
      threeheight: "",
      threeshow: false,
      fourheight: "",
      fourshow: false,
      fiveheight: "",
      fiveshow: false,
      sixheight: "",
      sixshow: "",
      pageheight: "",
      top_scroll: 0,
      // 优势的默认下标
      adventer_index: 0
    };
  },
  mounted() {
    let that = this;
    this.twotop();
    this.threetop();
    this.fourtop();
    this.fivetop();
    this.sixtop();
    this.pageheight = document.documentElement.clientHeight;
    window.addEventListener("scroll", that.handleScroll);
    this.getinfolist();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    // 获取资讯信息
    getinfolist() {
      this.ajax("web/getArticleList", {
        success: res => {
          window.console.log(res);
          let infomation = res.msg.data;
          infomation.forEach(el => {
            let date = el.update_time;
            date = date.split(" ")[0];
            // window.console.log(date)
            el.date = date;
          });
          window.console.log(res);
          this.infomationlist = res.msg.data;
          // let date = res.msg.data.update_time
          // // date =date.split(' ')
          // window.console.log(date)
        }
      });
    },
    adventer(key) {
      this.adventer_index = key;
    },
    adventert(key) {
      this.adventer_index = key + 3;
    },
    toindustry() {
      this.$router.push("/industry/industry");
    },
    // 第二块的距离顶部的高度
    twotop() {
      var two = document.getElementById("two");
      this.twoheight = two.offsetTop;
    },
    threetop() {
      var three = document.getElementById("three");
      this.threeheight = three.offsetTop;
    },
    fourtop() {
      var four = document.getElementById("four");
      this.fourheight = four.offsetTop;
    },
    fivetop() {
      var five = document.getElementById("five");
      this.fiveheight = five.offsetTop;
    },
    sixtop() {
      var six = document.getElementById("six");
      this.sixheight = six.offsetTop;
    },
    // 滚动事件
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop;
      this.top_scroll = scrollTop;
      // window.console.log(this.top_scroll)
      if (scrollTop > this.twoheight - this.pageheight) {
        this.twoshow = true;
        // console.log(this.twoshow);
      }
      if (scrollTop > this.threeheight - this.pageheight) {
        this.threeshow = true;
      }
      if (scrollTop > this.fourheight - this.pageheight) {
        this.fourshow = true;
      }
      if (scrollTop > this.fiveheight - this.pageheight) {
        this.fiveshow = true;
      }
      if (scrollTop > this.sixheight - this.pageheight) {
        this.sixshow = true;
      }
    },
    // 回到顶不
    scrollToTop() {
      let timer = null,
        _that = this;
      //动画，使用requestAnimationFrame代替setInterval
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        if (_that.top_scroll > 0) {
          _that.top_scroll -= 50;
          document.documentElement.scrollTop = document.body.scrollTop =
            _that.top_scroll;
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
          // _that.toTopShow = false;
        }
      });
    },
    changebannernav(key) {
      this.changebannernavindex = key;
      let swiper = this.$refs.obanner.swiper;
      swiper.realIndex = this.changebannernavindex;
      swiper.slideToLoop(swiper.realIndex, 1000, false);
    },
    slideChangeTransitionEnd() {
      let swiper = this.$refs.obanner.swiper;
      window.console.log(swiper.realIndex);
      this.changebannernavindex = swiper.realIndex;
    },
    //资讯详情
    toinfodetail(key) {
      this.$router.push("/industry/detail?id=" + key);
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/index/index.css");
</style>
